﻿<%@ page language="java" pageEncoding="UTF-8" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html lang="en">
<head>
	<base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>数据统计</title>
    <!-- 背景星空 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="<%=basePath%>css/data/common.css?v=${cache}">
    <link rel="stylesheet" href="<%=basePath%>css/commonMain.css">
    <link rel="stylesheet" href="<%=basePath%>layui/css/layui.css">

</head>
<style>
.tl{
    border-left: 3px solid #0e9fbf;
    border-top: 3px solid #0e9fbf;
    left: -2px;
    top: -2px;
}
.tr{
    border-right: 3px solid #0e9fbf;
    border-bottom: 3px solid #0e9fbf;
    right: -2px;
    bottom: -2px;
}
.bl {
    border-left: 3px solid #0e9fbf;
    border-bottom: 3px solid #0e9fbf;
    left: -2px;
    bottom: -2px;
}
.br {
    border-right: 3px solid #0e9fbf;
    border-top: 3px solid #0e9fbf;
    right: -2px;
    top: -2px;
}
.tl,.tr,.bl,.br{
	position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    z-index: 99;
}
.img_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
}
.head_text{
    position: absolute;
    top:10%;
    font-size: 38px;
    z-index: 99;
    color: #1e9bc7;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    letter-spacing: 8px;
    font-weight: bold;
}
.box_bg{
	border: 1px solid #03244c;
    box-shadow: inset 0 0 30px #07417a;
}
.date_div{
	position: absolute;top: 10px;color: #15b2e2;right: 10px;font-size: 22px;z-index:99;font-family: myFont;
}

.sb_box{
	width:100%;height:40px;line-height: 40px;float: left;border-bottom: 1px solid #0e4c5a;cursor: pointer;white-space:nowrap;
}
.sb_box:hover{
	background: #0a2a4685;
}
.sb_lxh{
	width:8%;height:100%;float: left;color: #97d9dc;
}
.sb_fx{
	width:7%;height:100%;float: left;color: #97d9dc;
}
.sb_ip{
	width:60%;height:100%;float: left;color: #33b2d8;
}
.sb_zx{
	width:25%;height:100%;float: left;
}
.sb_zt{
	padding: 3px;border-radius: 2px;font-size: 13px;
}

.l_title{
	width:100%;height:50%;transform: translateY(20%);padding-left: 10%;
}
.l_count{
	width:100%;height:50%;transform: translateY(20%);padding-left: 10%;text-align: right;
	position: absolute;right: 10%;font-weight: bold;
}

.per_count{
	font-family: myFont;color: #c8e4de;font-weight: 200;font-size: 25px;margin-right: 5px;position: relative;top: -5px;font-style:oblique
}
</style>
<script type="text/javascript">
    var type = "${type}";
    var oid = "${oid}";
    var systemPath = "<%=basePath%>";
</script>
<body>
   	<img src="<%=basePath%>images/map_bg.png" class="img_bg">
     <%-- <div style="position: absolute;top:0px;left:0px;background: #041023;width: 100%; height: 100%;"></div> --%>
    <div style="position: absolute;left:0px;top:0px;width:100%;height:8%;text-align: center;z-index: 99">
		<div class="head_text">物业数据预览大屏</div>
		<img src="images/data_bg.png" class="img_bg">
		<div class="date_div"></div>
		<div id="tianqi" style="position: absolute;top: -10px;left: 18px;z-index:99;">
    		<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" style="margin-top: -10px;" id="tianqi_f"
    					src="https://tianqiapi.com/api.php?skin=pitaya&color=15b2e2&fontsize=22&paddingtop=30"></iframe>
    	</div>
	</div>
	<div style="position: absolute;left:0px;top:10%;width:85%;height:90%;z-index: 99;color: #eafbff;font-size: 25px;">
		<div style="position: absolute;left:0px;width:100%;height:15%;z-index: 99;color: #eafbff;font-size: 25px;">
			<div class="box_bg" style="position: absolute;width:32%;height:99%;left:0.5%;top:1%;">
				<div class="l_t_c_box">
					<div class="l_title">
						<i class="pro-icon" style="font-size: 40px;">&#xe62e;</i>
						<span style="position: relative;top: -5px;">今日业主/租户识别数</span>
					</div>
					<div class="l_count" id="zh_count"></div>
				</div>
			</div>
			<div class="box_bg" style="position: absolute;width:32%;height:99%;left:33.5%;top:1%;">
				<div class="l_t_c_box">
					<div class="l_title" style="color: #3cc7e6;">
						<i class="pro-icon" style="font-size: 40px;">&#xe62e;</i>
						<span style="position: relative;top: -5px;">今日职工别数</span>
					</div>
					<div class="l_count" id="zg_count"></div>
				</div>
			</div>
			<div class="box_bg" style="position: absolute;width:32%;height:99%;left:66.5%;top:1%;">
				<div class="l_t_c_box">
					<div class="l_title" style="color: #da7f0e;">
						<i class="pro-icon" style="font-size: 40px;">&#xe62e;</i>
						<span style="position: relative;top: -5px;">今日陌生人识别数</span>
					</div>
					<div class="l_count" id="ms_count"></div>
				</div>
			</div>
		</div>
		<div style="position: absolute;left:0px;top:15.5%;width:100%;height:50%;z-index: 99;color: #eafbff;font-size: 25px;">
			<div class="box_bg" style="position: absolute;width:60%;height:99%;left:0.5%;top:1%;">
				<div style="width: 95%;height: 10%;position: relative;transform: translateY(50%);left: 5%;font-size: 18px;font-weight: bold;">
					今日流量统计
				</div>
				<div style="width:100%;height:90%;position: relative;" id="myEcharts1">
				</div>
			</div>
			<div class="box_bg" style="position: absolute;width:37.5%;height:99%;left:61%;top:1%;color:#a1e7f7">
				<div style="height:50%;width:52%;float:left;position: relative;">
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #eeeff3;color: #4e4c4c;">业主/租户总人数</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_yz1">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #30af07;">在住人数</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_yz2">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #0798af;">男性</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_yz3">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #c32c79;">女性</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_yz4">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
				</div>
				<div style="height:50%;width:46%;float:left;" id="myEcharts2"></div>
				<div style="height:49%;width:52%;float:left;float:left;">
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #eeeff3;color: #4e4c4c;">职工总人数</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_zg1">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #30af07;">在职人数</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_zg2">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #0798af;">男性</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_zg3">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
					<div style="width:100%;height:20%;white-space:nowrap;float:left;position: relative;top: 12%;">
						<span style="float:left;width:50%;text-align: right;">
							<span class="sb_zt" style="background: #c32c79;">女性</span>：
						</span>
						<span style="float:left;">
							<span class="per_count" id="count_zg4">0</span>
							<span style="position: relative;top: -5px;font-size: 16px;">人</span>
						</span>
					</div>
				</div>
				<div style="height:49%;width:46%;float:left;" id="myEcharts3"></div>
			</div>
		</div>
		<div style="position: absolute;left:0px;top:66%;width:100%;height:33%;z-index: 99;color: #aee6f3;font-size: 25px;">
			<div id="last_per" class="box_bg" style="position: absolute;width:98%;height:99%;left:0.5%;top:1%;font-size: 16px">
			</div>
		</div>
	</div>
	<div style="position: absolute;right:0px;top:8%;width:15%;height:92%;z-index: 99;color: #eafbff;font-size: 25px;background: #0c3456;background: #0c345647;">
		<div style="height: 40px;width:100%;background: #03779e;text-align: center;line-height: 40px;">
			<i class="layui-icon" style="font-size: 22px;">&#xe678;</i>
			<span style="font-size: 20px;margin-left: 5px;">设备管理</span>
		</div>
		<div style="height: 40px;width:100%;text-align: center;line-height: 40px;">
			<a id="selectSB" class="layui-btn layui-btn-sm" style="position: relative;top: 5px;">开始查询</a>
		</div>
		<div id="sb_all" style="font-size: 18px;text-align: center;overflow: auto;height: 86%;">
		</div>
	</div>
</body>
	<script type="text/javascript" src="<%=basePath%>layui/layui.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/data/echarts/echarts1.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/data/echarts/echarts2.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/data/echarts/echarts3.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/data/data.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/data/data_socket.js"></script>
    <script type="text/javascript">
    
	    var s = '<a class="tl"></a>';
		s += '<a class="tr"></a>';
		s += '<a class="bl"></a>';
		s += '<a class="br"></a>';
		$(".box_bg").append(s);
		
		$(window).resize(function(){
			myEcharts1.resize();
			myEcharts2.resize();
			myEcharts3.resize();
		});
		
    </script>
</html>